<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2022-11-24 11:41:49
 * @LastEditTime: 2023-11-16 18:57:46
 * @LastEditors: sueRimn
-->
<template>
  <view class="tips d-flex align-items-center justify-content-between">
    <view class="item d-flex" v-for="item in tips">
      <view class="base-icons" :class="item.icon + '-icon'" :key="item.id"/>
      <view class="text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tips: [
        { id: 1, icon: "junjian", text: "军舰级数据清理" },
        { id: 2, icon: "gongyi", text: "公益回收" },
        { id: 3, icon: "zhima", text: "芝麻速办｜极速回收" },
      ]
    }
  },
}
</script>

<style lang="scss" scoped>
.tips {
  position: relative;
  height: 34rpx;
  padding: 0 45rpx;
  margin: 30rpx 0 0 0;

  .item {
    position: relative;
    &:nth-child(2) {
      &::after {
        content: "";
        display: inline-block;
        width: 2rpx;
        height: 24rpx;
        background: #99A5A5;
        position: absolute;
        right: -20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      &::before {
        content: "";
        display: inline-block;
        width: 2rpx;
        height: 24rpx;
        background: #99A5A5;
        position: absolute;
        left: -20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .text {
      color: #99A5A5;
      font-size: var(--hui-font-size-26);
    }
  }

}
</style>
